<template>
	<view class="product_page">
		<view class="container" v-if="!join_in">
			<image style="width: 200rpx;display: block;margin: 350rpx auto 0rpx;"
				:src="getImgSrc('/uploads/20241009/17284478036706053b6a390.png')" mode="widthFix"></image>
			<view class="f600 f18 mt20" style="text-align: center;">
				暂无权限
			</view>
			<view class="f14 mt10" style="text-align: center;color:gray">
				入驻并完善企业资料即可上传产品
			</view>
			<view class="joinBtn" @click="goPage('/pages/settled/setPage')">
				立即入驻
			</view>
		</view>
		<view class="container2" v-else-if="join_in && !info_show">
			<view class="df ac sb">
				<view class="">共计：{{ product_list ?  product_list.length :  0}}个</view>
				<view class="df ac sb add_product" @click="goPage('/subPack/product/add-product')">
					<view class="">添加产品</view>
					<view class="add_icon f18">+</view>
				</view>
			</view>
			<view class="product_box df sb mt10">
				<view class="add_product_item" v-for="(item,index) in product_list" :key="index">
					<view style="padding:15rpx">
						<view class="product_img" v-if="isString(item.url)" ref="product_img" style="height:235rpx;">
							<image :src="getImgSrc(item.url)" mode="aspectFill" />
							<view class="top_up f12" v-if="item.is_top === 1">
								置顶
							</view>
							<view class="top_up f12 is_sh" :style="item.is_top === 1 ? 'right:90rpx;' : 'right:8rpx;'"
								v-if="item.status === 1">
								审核中
							</view>
							<view class="top_up f12 is_wtg cf"
								:style="item.is_top === 1 ? 'right:90rpx;' : 'right:8rpx;'"
								v-else-if="item.status === 3">
								未通过
							</view>
						</view>
						<!-- :style="{ height: img_width == 0 ? (337.7 * 0.75) + 'rpx' : (img_width * 0.75) + 'px' }" -->
						<view class="product_img" v-else ref="product_img" style="height:235rpx;">
							<image :src="getImgSrc(item.url[0])" mode="aspectFill" />
							<view class="top_up f12" v-if="item.is_top === 1">
								置顶
							</view>
							<view class="top_up f12 is_sh" :style="item.is_top === 1 ? 'right:90rpx;' : 'right:8rpx;'"
								v-if="item.status === 1">
								审核中
							</view>
							<view class="top_up f12 is_wtg cf"
								:style="item.is_top === 1 ? 'right:90rpx;' : 'right:8rpx;'"
								v-else-if="item.status === 3">
								未通过
							</view>
						</view>
						<view class="product_name mt5 f600">
							{{ item.name }}
						</view>
						<view class="product_tag mt5 f13">
							<view class="product_tag_text">{{item.machining}}</view>
							<view class="product_tag_text">{{ item.material }}</view>
						</view>
					</view>
					<view class="product_bom df ac">
						<view @click.stop="setTop(item.id,item.is_top)"
							:class="item.is_top === 1 ? 'color_gray' : 'xt-color'">
							{{ item.is_top === 1 ? '取消置顶' : '置顶' }}
						</view>
						<view @click="goEdit(item.id,item.status)" class="xt-color"
							style="width:100rpx;text-align: center;">
							编辑
						</view>
					</view>
				</view>
				<view class="add_product_item df ac" style="min-height: 350rpx;"
					@click="goPage('/subPack/product/add-product')">
					<van-icon name="plus" size="85" color="#CDCDCD" />
					<view class="name f18 f500 mt10">
						添加产品
					</view>
				</view>
			</view>
			<!-- <view class="pd15 mt15" hover-class="none" :hover-stop-propagation="false">
				<button class="sub" @tap="onSub"> 保存并提交 </button>
			</view> -->
		</view>

		<!-- <van-popup :show="Incomplete"
			custom-style="padding:30rpx 30rpx 20rpx 30rpx;border-radius:18rpx;font-size:26rpx;width:76%;" :round="true"
			:close-on-click-overlay="true">
			<view class="f16" style="text-align: center;">
				请完善企业资料
			</view>
			<view class="restart" @click="goPage('/pages/Factoryinformation/Factoryinformation')">
				立即完善
			</view>
		</van-popup> -->
		<!-- <van-popup :show="Incomplete" round>
			<p class="df ac jc pd200 mt5 w311">
				<span class="f16 c28 f500">请完善企业资料</span>
			</p>
			<view class="df ac btf1 h48 mt15">
				<p class="w50 tc f16 c28" @tap.native="onBack">取消</p>
				<p class="w50 h48 c10 df jc ac share-but1" @click="goPage('/pages/Factoryinformation/Factoryinformation')">
					<button class="c10 f16" style="width:100%;min-width:300rpx;">立即完善</button>
				</p>
			</view>
		</van-popup> -->


		<van-popup :show="ifStatus" round @close="ifStatus = true">
			<p class="df ac jc pd200 mt5 w311">
				<span class="f16 c28 f500">您的详细资料{{ address.status == 1 ? '正在审核中' : '未通过审核' }}。</span>
			</p>
			<p class='df ac jc btf1 f16 c10 h48' @tap="onBack">我知道了</p>
		</van-popup>

		<van-popup :show="ifStatus" round @close="ifStatus = true">
			<p class="df ac jc pd200 mt5 w311">
				<span class="f16 c28 f500">您的详细资料{{ address.status == 1 ? '正在审核中' : '未通过审核' }}。</span>
			</p>
			<p class='df ac jc btf1 f16 c10 h48' @tap="onBack">我知道了</p>
		</van-popup>
		<van-popup :show="is_operate" round @close="is_operate = false">
			<p class="df ac jc pd200 mt5 w311">
				<span class="f16 c28 f500">该账号不可操作</span>
			</p>
			<p class='df ac jc btf1 f16 c10 h48' @tap="is_operate = false">我知道了</p>
		</van-popup>
	</view>
</template>

<script>
	import {
		verifyPhoneNumber
	} from "@/utils/util"
	const http = require('../../utils/http');
	export default {
		data() {
			return {
				is_operate: false,
				info_show: false,
				join_in: false,
				img_width: 0,
				product_list: [],
				Incomplete: false,
				detailUrl: '/pages/editSettled/editSettled',
				address: null,
				settledStatus: null,
				info: null,
				info_data: null,
				page: 1,
				ifStatus: false,
				callback: null
			};
		},
		mounted() {

		},
		onLoad() {

			// this.getListInfo()
			this.getList()
		},
		onReady() {
			// setTimeout(() => {
			// 	this.getInfo()
			// }, 800)
		},
		onShow() {
			// 验证是否登录，是否有手机号
			this.callback = verifyPhoneNumber()
			if (this.callback) return
			this.getUserInfo()

			uni.$once('products', (data) => {
				if (data.type == 'add') {
					console.log(data, 'data')
					this.product_list.unshift(data.main_products)
					console.log(this.product_list, 'product_list')
					this.getInfo()
				} else {
					this.product_list[data.index] = data.main_products
				}
			})
		},
		onUnload() {
			clearTimeout(this.callback)
		},
		destroyed() {
			uni.$off('products')
		},
		methods: {
			getList() {
				http.request('user/productList', {
					page: this.page,
					pageSize: 10
				}).then(res => {
					this.product_list = res.data.list || []

					if (this.product_list.length !== 0) {
						this.product_list.forEach(item => {
							if (typeof item.url === 'string' && item.url[0] != '[') {
								item.url = [item.url]
							} else {
								item.url = JSON.parse(item.url)
							}
						})
					}
				})

			},
			onAgain() {
				this.info_show = false
			},
			// isKnow(){
			// 	this.onBack()
			// },
			onBack() {
				uni.navigateBack()
			},
			isString(value) {
				return typeof value === 'string';
			},
			getInfo() {
				const query = uni.createSelectorQuery().in(this);

				query
					.select(".product_img")
					.boundingClientRect((data) => {
						console.log("得到布局位置信息", data);
						this.img_width = data.width
					})
					.exec();
			},
			checkLogin() {
				const token = uni.getStorageSync('token')
				if (!token) {
					uni.showToast({
						title: '您还未登录，请先登录',
						icon: 'none'
					})
					this.callback = setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 1000)
				}
			},
			getListInfo() {
				http.request('user/settledInfo', {
					type: 1
				}).then(res => {
					this.product_list = res.data.info.detail.main_products || []

					const data = res.data.info.detail
					if (data.product_status == 1 || data.product_status == 3) {
						this.info_show = true
					} else {
						this.info_show = false
					}
					if (this.product_list.length != 0) {
						this.getInfo()
					}
					console.log(this.product_list, 'this.product_list')
				})
				// uni.setStorageSync('main_products', JSON.stringify(this.product_info))
				// let list = uni.getStorageSync('main_products')

			},
			setTop(id, is_top) {
				if (this.info.user_type === 1) {
					this.is_operate = true
					return
				}
				http.request('user/productInfo', {
					id,
					is_top: is_top === 1 ? 0 : 1
				}).then(res => {
					this.getList()
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				})
			},
			getUserInfo() {
				http.request('user/userInfo').then((res) => {
					this.info = res.data.userInfo
					res.data.userInfo.grade === 0 ? this.join_in = false : this.join_in = true
					if (res.data.userInfo.grade != 0) {
						http.request('user/settledInfo').then((res) => {
							this.info_data = res.data.info
							this.address = res.data.info
							this.settledStatus = res.data.info.settledStatus

							if (this.address.status == 1 || this.address.status == 3) {
								this.ifStatus = true
							}
							if (!this.info.settledStatus) {
								console.log(this.info.settledStatus);
								this.detailUrl = '/pages/editSettled/editSettled'
							} else {
								if (this.address.detail && this.address.detail.status == 2) {
									this.detailUrl = '/pages/companyDetail/companyDetail?id=' + this.info
										.id
								} else {
									this.detailUrl = '/pages/Factoryinformation/Factoryinformation'
								}
							}

							if (this.detailUrl != '/pages/companyDetail/companyDetail?id=' + this.info
								.id && this.address.status != 1) {
								this.Incomplete = true

							}

						}).catch((res) => {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						});
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				});
			},
			goEdit(id, status) {
				if (this.info.user_type === 1) {
					this.is_operate = true
					return
				}
				if (status === 1) {
					uni.showToast({
						title: '该产品正在审核中',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: '/subPack/product/add-product?id=' + id
				})
			},
			goPage(url, id) {
				if (url === '/subPack/product/add-product' && this.info.user_type === 1) {
					this.is_operate = true
					return
				}
				uni.navigateTo({
					url: id ? url + 'id=' + id : url,
				})
			},
		}
	}
</script>

<style lang="scss">
	.product_page {
		padding: 30rpx;
		box-sizing: border-box;
	}

	.share-but1 {
		width: 50% !important;
		font-size: 32rpx;
		padding: 0 !important;
		margin: 0 !important;
		font-weight: 400;
		text-align: center;
		color: #283043;
		line-height: 96rpx;
		border-left: 1rpx solid #ebedf0;
	}

	.container2 {

		// display: flex;
		// flex-direction: column-reverse;
		.add_product {
			border-radius: 30rpx;
			padding: 10rpx 10rpx 10rpx 15rpx;
			color: #fff;
			background-color: $xt-primary;

			.add_icon {
				margin-left: 10rpx;
				width: 35rpx;
				height: 35rpx;
				line-height: 30rpx;
				text-align: center;
				border-radius: 50%;
				background-color: #fff;
				color: #1050c7;
			}
		}

		.product_box {
			flex-wrap: wrap;
		}

		.add_product_item {
			margin-bottom: 20rpx;
			width: 48%;
			// border: 7rpx solid #CDCDCD;
			border: 2rpx solid rgba(0, 0, 0, 0.05);
			box-shadow: 0 0 10rpx 1rpx rgba(0, 0, 0, 0.4);
			justify-content: center;
			flex-direction: column;
			border-radius: 10rpx;
			// padding:10rpx;
			// padding: 50rpx 0rpx;
			box-sizing: border-box;

			.name {
				color: #CDCDCD;
				// padding-bottom: 50rpx;
			}

			.product_img {
				position: relative;
				width: 100%;
				// min-height: 250rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}

				.top_up {
					position: absolute;
					right: 8rpx;
					top: 8rpx;
					padding: 8rpx 15rpx;
					background-color: #FFD300;
					border-radius: 10rpx;
				}
			}

			.product_tag {
				color: #A2A2A2;
				height: 68rpx;

				.product_tag_text {
					width: 100%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.product_bom {
				border-top: 1px solid #a2a2a2a3;
				padding: 10rpx;
				justify-content: flex-end;
			}
		}
	}

	.joinBtn {
		width: 230rpx;
		margin: 100rpx auto 0;
		padding: 20rpx 20rpx;
		text-align: center;
		color: #fff;
		background-color: $xt-primary;
		border-radius: 10rpx;
	}

	.xt-color {
		color: $xt-primary;
	}

	.color_gray {
		color: #8F8F8D;
	}

	.is_sh {
		background-color: gainsboro !important;
	}

	.is_wtg {
		background-color: rgba(252, 11, 45, 1) !important;
	}
</style>